<template>
  <div class="container">
    <div class="split left-panel" @mouseenter="handleMouseEnterLeft" @mouseleave="handleMouseLeave">
      <div class="panel-content">
        <h1>登录账号</h1>
        <button class="btn login-btn" @click="goToLogin">立刻登录</button>
      </div>
    </div>
    <div class="split right-panel" @mouseenter="handleMouseEnterRight" @mouseleave="handleMouseLeave">
      <div class="panel-content">
        <h1>注册账号</h1>
        <button class="btn register-btn" @click="goToRegister">马上注册</button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 修改导入语句，添加onUnmounted
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

// 初始化路由
const router = useRouter()

// 使用ref跟踪悬停状态
const isHoverLeft = ref(false)
const isHoverRight = ref(false)

// 路由跳转方法
const goToLogin = () => {
  router.push('/login')
}

const goToRegister = () => {
  router.push('/register')
}

// 从最顶部重构事件处理逻辑
let leftPanel, rightPanel

// 确保DOM加载完成后执行
onMounted(async () => {
  // 等待DOM完全渲染
  await nextTick()

  // 获取DOM元素
  leftPanel = document.querySelector('.left-panel')
  rightPanel = document.querySelector('.right-panel')

  // 验证元素是否存在
  if (!leftPanel || !rightPanel) {
    console.error('面板元素未找到，无法初始化悬停功能')
    return
  }

  // 左侧悬停处理
  const handleLeftMouseEnter = () => {
    document.documentElement.classList.add('hover-left')
    document.documentElement.classList.remove('hover-right')
  }

  // 右侧悬停处理
  const handleRightMouseEnter = () => {
    document.documentElement.classList.add('hover-right')
    document.documentElement.classList.remove('hover-left')
  }

  // 鼠标离开处理 - 恢复默认1:1
  const handleMouseLeave = () => {
    document.documentElement.classList.remove('hover-left', 'hover-right')
  }

  // 添加事件监听
  leftPanel.addEventListener('mouseenter', handleLeftMouseEnter)
  rightPanel.addEventListener('mouseenter', handleRightMouseEnter)
  leftPanel.addEventListener('mouseleave', handleMouseLeave)
  rightPanel.addEventListener('mouseleave', handleMouseLeave)

  // 存储事件处理函数以便卸载时清除
  leftPanel.__handleLeftMouseEnter = handleLeftMouseEnter
  rightPanel.__handleRightMouseEnter = handleRightMouseEnter
  leftPanel.__handleMouseLeave = handleMouseLeave
  rightPanel.__handleMouseLeave = handleMouseLeave
})

// 确保事件监听被正确移除
onUnmounted(() => {
  if (leftPanel) {
    leftPanel.removeEventListener('mouseenter', leftPanel.__handleLeftMouseEnter)
    leftPanel.removeEventListener('mouseleave', leftPanel.__handleMouseLeave)
  }
  if (rightPanel) {
    rightPanel.removeEventListener('mouseenter', rightPanel.__handleRightMouseEnter)
    rightPanel.removeEventListener('mouseleave', rightPanel.__handleMouseLeave)
  }
})
</script>

<style scoped>
/* 基础样式 - 从最顶部开始修复 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.split {
  position: absolute;
  height: 100%;
  width: 50%;
  /* 默认1:1比例 */
  transition: width 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 左侧面板样式 */
.left-panel {
  left: 0;
  background-image: url('@/logo/生成团队介绍图 1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: black;
  opacity: 0.7;
  /* 设置90%透明度 */
}

/* 右侧面板样式 */
.right-panel {
  right: 0;
  background-image: url('@/logo/生成团队介绍图 2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: black;
  opacity: 0.7;
  /* 设置90%透明度 */
}

/* 悬停状态 - 使用更高优先级的选择器 */
.container:hover .left-panel:hover {
  width: 75% !important;
}

.container:hover .left-panel:hover+.right-panel {
  width: 25% !important;
}

.container:hover .right-panel:hover {
  width: 75% !important;
}

.container:hover .right-panel:hover+.left-panel {
  width: 25% !important;
}

/* 鼠标离开时恢复默认状态 */
.container:not(:hover) .split,
.split:not(:hover) {
  width: 50% !important;
}

/* 面板内容样式 */
.panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
}

/* 字体样式 */
h1 {
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-weight: 700;
  color: inherit;
  text-align: center;
}

/* 按钮基础样式 */
.btn {
  padding: 0.8rem 2.5rem;
  border-radius: 4px;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 登录按钮样式 */
.login-btn {
  background-color: #ffffff;
  color: #165DFF;
}

.login-btn:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}

/* 注册按钮样式 */
.register-btn {
  background-color: #165DFF;
  color: #ffffff;
}

.register-btn:hover {
  background-color: #0e4cd1;
  transform: translateY(-2px);
}
</style>